<template>
	<div id="notice">
		<!-- 通知管理哈哈哈哈 -->
		<el-row class="role-head">
			<el-input placeholder="请输入标题关键字" v-model="mtitle"></el-input>
			<el-input placeholder="请输入内容关键字" v-model="content"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="searchUser">查询</el-button>
			<el-button type="primary" icon="el-icon-bottom" @click="downLoadExsl">导出</el-button>
		</el-row>
		<el-row class="notice-add">
			<el-button type="primary" icon="el-icon-edit" @click="addUser">添加</el-button>
			<el-button type="danger" icon="el-icon-delete" @click="delmorehUser">批量删除</el-button>
		</el-row>
		<!--下面的表格 -->
		<template>
			<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
				@selection-change="handleSelectionChange" :border="true" :header-cell-style="{textAlign: 'center'}"
				:cell-style="{textAlign:'center'}">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column label="通知标题" prop="title" width="120">

				</el-table-column>
				<!-- prop="content" -->
				<el-table-column label="通知详情" width="120">
					<template slot-scope="slot">
						<el-button type="primary" @click="readNotice(slot.row)">查看</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="addTime" label="添加时间">
				</el-table-column>
				<el-table-column prop="id" label="管理员id">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
				</el-table-column>
			</el-table>

		</template>

		<template>
			<!-- 查看通知 -->
			<el-dialog title="通知" :visible.sync="dialogVisible" width="45%" id="dg">
				<div v-html="noticeContent">

				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>

		</template>

		<template>
			<!-- 这里是分页功能 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</template>

		<template>
			<!-- 富文本编辑器 -->

			<el-dialog  :title="flag?'通知':'编辑'" :visible.sync="dialogVisible2" width="50%">
				<el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="通知内容" prop="pass" style="font-weight: bolder;">
						<el-input placeholder="输入标题内容" v-model="editTitle"></el-input>
					</el-form-item>
					<el-form-item label="通知内容" prop="pass"style="font-weight: bolder;">
						<div>
							<myeditor v-model="tinymceHtml" :init="editorInit"></myeditor>
						</div>
					</el-form-item>
				</el-form>

				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible2 = false">取 消</el-button>
					<el-button type="primary" @click="submitForm(ruleForm)">确 定</el-button>
				</span>

			</el-dialog>

		</template>



	</div>
</template>

<script>
	import {
		noticeList,
		delNotice,
		delSelect,
		addNotice,
		editNotice
	} from '../../https/system'
	import Editor from "@tinymce/tinymce-vue";
	// import tinymce from 'tinymce/tinymce';

	// import xxx from '../../utils/zh_CN.js'
	export default {
		// name: 'tinymce',
		components: {
			myeditor: Editor
		},
		data() {
			return {
				// 富文本通知的标题
				editTitle: '',
				// 富文本
				tinymceHtml: '',
				// 看选中哪个？
				flag:true,
				// 编辑的id
				editId:'',
				// 标题关键字
				mtitle: '',
				// 内容关键字
				content: '',
				// 表格数据
				tableData: [],
				//通过复选框选中的数据的集合
				multipleSelection: [],
				// 弹框是否进行显示
				dialogVisible: false,
				// 添加和编辑弹框
				dialogVisible2: false,
				// 弹框里面的内容
				noticeContent: `<h1>123</h1>`,
				// 当前默认选中哪个页面
				page: 1,
				// 每页的限制条数
				limit: 0,
				// 总共条数
				total: 0,
				// 表单的数据
				ruleForm: {
					pass: '',
					checkPass: '',
					age: ''
				},
				formLabelWidth: '120px',
				// 富文本编辑
				editorInit: {
					language_url: '/tinymce/lang/zh_CN.js',
					language: 'zh_CN',
					height: 400,
					skin_url: '/tinymce/skins/ui/oxide', // skin路径
					convert_urls: false,
					plugins: [
						'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
					],
					toolbar: [
						'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
						'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
					],
					images_upload_handler: function(blobInfo, success, failure) {
						const formData = new FormData();
						formData.append('file', blobInfo.blob());
						createStorage(formData)
							.then(res => {
								success(res.data.data.url);
							})
							.catch(() => {
								failure('上传失败，请重新上传');
							});
					}
				},



			}
		},

		methods: {
			addUser() {
				// 添加用户
				this.flag=true
				this.dialogVisible2 = true

			},
			delmorehUser() {
				// 批量删除
				console.log("我选中将要删除的值", this.multipleSelection)
				// 我们删除得要得到所有的选中的id组成的集合
				// 那么进行提取

				// 如果为空的话那么就是不让删除
				if (this.multipleSelection.length == 0) {
					this.$message({
						showClose: true,
						message: '请至少勾选一条才能删除！',
						type: 'error'
					});
					return false
				} else {
					let ids = []
					for (let i = 0; i < this.multipleSelection.length; i++) {
						ids.push(this.multipleSelection[i].id)
						// console.log(this.multipleSelection[i].id)
					}
					console.log("这个是所有的id的集合", ids)
					let params = {
						ids: ids
					}
					delSelect(params).then(res => {
						console.log("批量删除成功", res)
						noticeList().then(res => {
							console.log(res, "结果")
							this.tableData = res.data.data.list
							// 总条数
							this.total = res.data.data.total
							// console.log("结果",this.tableData)
						}).catch(err => {
							console.log('请求失败')
						})
						
					}).catch(err => {
						console.log("批量删除失败", err)
					})
				}

			},


			searchUser() {
				// 这里进行查询
				let params = {
					page: null,
					limit: null,
					title: this.mtitle,
					content: this.content
				}
				noticeList(params).then(res => {
					console.log("查询的数据", res)
					this.tableData = res.data.data.list
				}).catch(err => {
					console.log("查询报错", err)
				})



			},
			downLoadExsl() {
				// 导出
				// alert("暂时没有导出的数据")
				/* 
					如果没有选中那就是导出所有的数据
					反之如果有选中就是导入选中的数据
				 */
				if(this.multipleSelection.length==0){
					// 那么就是直接导出
					this.$confirm("此操作将导出列表中所有的excel文件, 是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							this.excelData = this.tableData; //你要导出的数据list。						
							// 这里进行修改
							this.export2Excel();
						})
						.catch(() => {});
				}else{
					this.$confirm("此操作将导出列表中被选中的数据, 是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							this.excelData = this.multipleSelection; //你要导出的数据list。						
							// 这里进行修改
							this.export2Excel();
						})
						.catch(() => {});
				}	
			},
			export2Excel() {
				var that = this;
				require.ensure([], () => {
					const {
						export_json_to_excel
					} = require("../../excel/Export2Excel"); //这里必须使用绝对路径，根据自己的命名和路径
					const tHeader = [
						// 这个是导出excel里面的表头
						"通知标题",
						// "通知内容",
						"添加时间",
						
					]; // 导出的表头名
					const filterVal = [
						// 这个是你表格数据的字段
						"title",
						// "content",
						"addTime"
					]; // 导出的表头字段名
					const list = that.excelData;
					// that.excelData为传入的数据
					const data = that.formatJson(filterVal, list);
					export_json_to_excel(tHeader, data, `通知汇总`); // 导出的表格名称，根据需要自己命名
					// tHeader为导出Excel表头名称，`xxxxxx`即为导出Excel名称
				});
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]));
			},	
				


			readNotice(row) {
				// console.log(row, "查看")
				this.dialogVisible = true
				// 将通知的内容传递进去
				this.noticeContent = row.content

			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleEdit(index, row) {
				console.log(index, row);
				// 这里进行编辑操作				
				this.editTitle=row.title
				this.tinymceHtml=row.content
				// 然后进行编辑并提交
				this.editId=row.id
				this.flag=false
				this.dialogVisible2=true
			},
			handleDelete(index, row) {
				// console.log("删除",row);
				// 删除数据,调用接口
				let params = {
					id: row.id,
					title: row.title,
					content: row.content
				}
				delNotice(params).then(res => {
					// console.log("删除完毕",res)
					noticeList().then(res => {
						this.tableData = res.data.data.list
					}).then(err => {

					})
				}).catch(err => {
					console.log("删除失败", err)
				})


			},

			handleSizeChange(val) {
				// 分页改变显示数据
				// console.log(`每页 ${val} 条`);
				this.limit = val
				let params = {
					page: this.page,
					limit: this.limit
				}
				noticeList(params).then(res => {
					// console.log("每页100条", res)
					this.tableData = res.data.data.list
				}).then(err => {

				})
			},
			handleCurrentChange(val) {
				// 当前页码的数据
				// console.log(`当前页: ${val}`);
				this.page = val
				let params = {
					page: this.page,
					limit: this.limit
				}
				noticeList(params).then(res => {
					// console.log("每页100条", res)
					this.tableData = res.data.data.list
				}).then(err => {

				})
			},
			//表单进行提交
			submitForm(ruleForm) {
				if(this.flag){
					//这里对内容进行打印
						// console.log("我是通知标题",this.editTitle)
						// console.log("我是通知内容",this.tinymceHtml)
						let params={
							title:this.editTitle,
							content:this.tinymceHtml,
						}
						addNotice(params).then(res=>{
							console.log("成功添加",res)
						}).catch(err=>{
							console.log("失败的原因",err)
						})
						// 进行刷新
						noticeList().then(res => {
						console.log(res, "结果")
						this.tableData = res.data.data.list
						// 总条数
						this.total = res.data.data.total
						// console.log("结果",this.tableData)
					}).catch(err => {
						console.log('请求失败')
					})						
						//关闭弹框提交表单
							this.dialogVisible2=false
				}else{
					// 编辑提交
					let params={
							id:this.editId,
							title:this.editTitle,
							content:this.tinymceHtml,
						}
						editNotice(params).then(res=>{
							console.log("成功编辑",res)
						}).catch(err=>{
							console.log("编辑失败的原因",err)
						})
						// 进行刷新
						noticeList().then(res => {
						console.log(res, "结果")
						this.tableData = res.data.data.list
						// 总条数
						this.total = res.data.data.total
						// console.log("结果",this.tableData)
					}).catch(err => {
						console.log('请求失败')
					})						
						//关闭弹框提交表单
							this.dialogVisible2=false
					
				}
					
			},
		},
		// 挂载
		mounted() {
			noticeList().then(res => {
				console.log(res, "结果")
				this.tableData = res.data.data.list
				// 总条数
				this.total = res.data.data.total
				// console.log("结果",this.tableData)
			}).catch(err => {
				console.log('请求失败')
			})



		}

	}
</script>

<style>
	.role-head {
		margin-bottom: 15px;
		min-width: 500px;
		overflow: hidden;
	}

	.role-head .el-input {
		width: 150px !important;
		margin-right: 10px;
	}

	.notice-add {
		/* 让其弹性盒子 */
		display: flex;
		justify-content: end;
		margin-bottom: 10px;
	}

	.block {
		margin-top: 20px;
	}
</style>
